<template>
    <div class="login">
        <div class="header">
            <div class="header-left iconfont" @click="goback">&#xe780;</div>
            <div class="header-center">注册</div>
        </div>
        <div class="user">
            <div class="title">
               <h2>锦曼JinMan</h2>
                <h4>锦衣旗袍诗 曼玉花样时</h4> 
            </div>
            <div class="nam">
                <span class="iconfont">&#xe731;</span>
                <p><input type="text" placeholder="请输入你手机号"></p>
            </div>
            <div class="pwd">
                <span class="iconfont">&#xe61a;</span>
                <p>
                    <input type="password" placeholder="请输入验证码">
                    <span class="verification">发送验证码</span>
                </p>
            </div> 
            <div class="tab">
                <p>注册</p>
                <p @click="login">已有账号,点击登录</p>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    methods:{
        goback(){
            this.$router.go(-1)
        },
        login(){
            this.$router.push('/login')
        }
    }
}
</script>


<style scoped>
.login{
    background: antiquewhite;
}
.header{ 
    width: 100%;
    display:flex;
    background:  #591514;
    height: 2.5rem;
    color: #f6e0c2;
    font-size: .7rem;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 555;
}
.header .header-center{
    flex:1;
    line-height: 1.5rem;
    margin: auto;
    text-align: center;
}
.header-center span{
    float: right;
    margin-right:3%;
    font-size: 1rem; 
}
.header-left{
    margin:0 3%;
    line-height: 2.5rem;      
}
.user{
    margin-top: 2.5rem;
    text-align: center;
    color: #591514;
    overflow: hidden;
}
.title{
    margin: 20% 0;
}
.user h2,.user h4{
    font-weight: bold;
    line-height: 1.5rem;
}
.nam,.pwd{
    position: relative;
}
.nam input,.pwd input{
    width: 90%;
    height: 2rem;
    text-indent: 15%;
    background: none;
    border: 1px solid brown;
    border-radius:.4rem; 
    margin-bottom: 8%;
    font-size: 1rem;
}
.pwd input{
    width: 50%;
    text-indent: 2.3rem;
}
.pwd .verification{
   background: orange;
   color: #fff;
   display: inline-block;
   height: 2rem; 
   line-height: 2rem;
   padding: 0 .4rem;
   border-radius:.4rem; 
   margin-left: 8%;
}
.user .iconfont{
    font-size: 1.5rem;
    position: absolute;
    left: 7%;
    top:8px;
}
.tab p:nth-child(1){
    color: #fff;
    background: #591514;
    width: 90%;
    font-size: 1.2rem;
    line-height: 2rem;
    border-radius: .4rem;
    margin-left:5%; 
}
.tab p:nth-child(2){
    width: 80%;
    margin-left:10%; 
    margin-top:10%; 
    text-align: center;
}
</style>
